<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    chartData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
    },

    setOptions(chartData = {}) {
      this.chart.setOption({
          title: {
            text: chartData.text,
            left: "center",
            top: 10,
            textStyle: {
              color: "#fff",
              fontSize: "16",
            },
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          // legend: {
          //   left: "center",
          //   bottom: "10",
          //   // data: ['容桂', '大良', '均安', '勒流', '乐从']
          //   data: chartData.name,
          //   textStyle: { color: "#c3cad9" },
          // },
          series: [
            {
              name: chartData.text,
              type: "pie",
              // roseType: 'radius',
              radius: [40,60],
              // color: ["#138CEB","#06dcab"],
              center: ["50%","42%"],
              // label: { show: true },
              label: {
                normal: {
                  formatter: "{b} : {c}",
                  // padding: [0, -100, 25, -100],
                  rich: {
                    icon: {
                      fontSize: 16,
                    },
                    name: {
                      fontSize: 14,
                      padding: [0,10,0,4],
                      color: "#666666",
                    },
                    value: {
                      fontSize: 18,
                      fontWeight: "bold",
                      color: "#333333",
                    },
                  },
                  position: 'inner'
                },
              },
              labelLine: { show: true },
              data: [
                {
                  name: chartData.name[0],
                  value: chartData.value[0],
                },
                {
                  name: chartData.name[1],
                  value: chartData.value[1],
                },
                {
                  name: chartData.name[2],
                  value: chartData.value[2],
                },
                {
                  name: chartData.name[3],
                  value: chartData.value[3],
                },
                {
                  name: chartData.name[4],
                  value: chartData.value[4],
                },
                {
                  name: chartData.name[5],
                  value: chartData.value[5],
                },
                {
                  name: chartData.name[6],
                  value: chartData.value[6],
                }
              ],
              animationEasing: "cubicInOut",
              animationDuration: 2600,
            },
          ],
        })
    }
  }
}
</script>
